<template>
	<view class="content">
		<uni-popup ref="popupsuccess" type="message">
			<uni-popup-message type="success" message="刷新成功" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popuperror" type="message">
			<uni-popup-message type="error" message="更新失败,请重试" :duration="2000"></uni-popup-message>
		</uni-popup>

		<waterfallsFlow :list="artList" @wapperLick="toShopping">
			<!-- #ifndef  MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="cnt">
						<view class="block-content__name">{{item.name}}</view>
						<view class="block-content__time">{{item.title}}</view>
						<view class="block-content__price">
							<text class="block-content__price-price">￥{{item.sale_price}}</text>
							<text class="block-content__price-info">{{item.shopping_num_text}}人买过</text>
						</view>

				</view>
			</template>
			<!-- #endif -->
		</waterfallsFlow>

		<view class="more" v-if="showButtonLoading">
			<uni-load-more :status="more" :content-text="contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import {
		mapState
	} from 'vuex'
	import {
		get_shopping
	} from "../../../common/api/list";

	export default {
		components: {
			waterfallsFlow
		},
		data() {
			return {
				artList: [], // 新闻信息
				more: 'loading',
				showButtonLoading: false,
				currentPage: 1,
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		watch: {
			// 检测userinfo的变化
			userinfo(newVal) {
				//userinfo 变好了
				console.log('watch userinfo变化了')
			}
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
		},
		onShow() {
			const that = this
			// 监听文章发送事件
			uni.$on('submitChange', (res) => {
				this.artList = []
				that.currentPage = 1
				console.log('监听文章发送事件')
				that.getList(1);
			})

			this.getList();

			// 分享
			this.shareWx('', '产品展示')

		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.getList(1);
		},
		// 上滑加载
		onReachBottom() {
			// this.more == moMore 时候表示已经加载完成,不需要再请求了
			if (this.more == 'moMore') {
				return;
			} else {
				this.getList(2);
			}
		},
		methods: {
			// 商品详情页
			toShopping(item) {
				uni.navigateTo({
					url: '/pages/shopping/shopping?id=' + item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},

			//获取数据
			// is_pulldownrefresh = 0 原始加载
			// is_pulldownrefresh = 1 下拉刷新数据
			// is_pulldownrefresh = 2 上拉加载数据
			getList(is_pulldownrefresh = 0, page = this.currentPage, num = 10) {

				if (is_pulldownrefresh === 0 || is_pulldownrefresh === 1) {
					// 显示顶部加载
					uni.showLoading()
				} else if (is_pulldownrefresh === 2) {
					this.showButtonLoading = true
				}
				// 为了显示
				var _this = this

				this.$api.get_shopping({
					page: page,
					num: num,
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length === 0) {
							//加载完成
							_this.more = 'moMore'
							_this.showButtonLoading = true
						} else if (res.data.length < num) {
							//如果本次加载的数量小于num说明已经获取完了
							_this.more = 'moMore'

						}
              console.log(1)
						_this.artList = _this.artList.concat(res.data)
						_this.currentPage = _this.currentPage + 1;

						if (is_pulldownrefresh === 1) {
							// is_pulldownrefresh = 1 下拉刷新数据
							setTimeout(() => {
								//停止加载
								uni.stopPullDownRefresh();

								//提示刷新成功
								_this.$refs.popupsuccess.open()

								//隐藏加载
								uni.hideLoading()

							}, 1000)
						} else if (is_pulldownrefresh == 2) {
							// is_pulldownrefresh = 2 上拉加载数据
							setTimeout(() => {
								//隐藏加载
								uni.hideLoading()

							}, 1000)
						} else {
							//隐藏加载
							uni.hideLoading()
						}

					} else {
						//提示刷新成功
						_this.$refs.popuperror.open()
						//隐藏加载
						uni.hideLoading()
					}


				}).catch(() => {

				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 10px;

		.cnt {
			padding: 10px;

			.title {
				font-size: 16px;
			}

			.text {
				font-size: 14px;
				margin-top: 5px;
			}

			.block-content__name {
				color: #000;
			}

			.block-content__time {
				color: rgb(44, 62, 80);
				font-size: 12px;
				margin-top: 5px;
			}

			.block-content__price {
				display: flex;
				margin-top: 10px;
				justify-content: space-between;
				align-items: center;

				.block-content__price-price {
					color: red;
				}

				.block-content__price-info {
					color: grey;
					font-size: 12px;
				}
			}
		}
	}
</style>
